/* 
图表概览 
1 显示班级概况
2 薪资-折线图

 */

// 班级概况
function getStudentOverview() {
    axios.get('/student/overview').then((result) => {
    // console.log(result);
    if (result.data.code === 0) {
        // 获取里面的数据
        const { avgAge, avgSalary, proportion, total } = result.data.data;
        document.querySelector('.avgAge').innerText = avgAge;
        document.querySelector('.avgSalary').innerText = avgSalary;
        document.querySelector('.proportion').innerText = proportion;
            document.querySelector('.total').innerText = total;
        }
    });
}

// 班级概况
getStudentOverview();

// 获取全部学员信息
function getStudentList() {
    axios.get('/student/list').then((result) => {
        const list = result.data.data;

        // 接收数组 渲染折线图
        salaryLine(list);
        // 籍贯饼图
        homeTown(list);
    });
}
// 薪资折线图
function salaryLine(list) {
    // 拆分 期望薪资数组
    const salarys = list.map((v) => v.salary);
    // 拆分 实际薪资数组
    const truesalarys = list.map((v) => v.truesalary);

    // 拆分 名单数组
    const names = list.map((v) => v.name);

    // 变成 图表显示出来

    // 1 获取有宽度和高度的div 元素 传入 echarts 实例化
    const myChart = echarts.init(document.querySelector('.line'));
    // 2 添加一些 配置
    const option = {
        // 设置线条颜色
        color: ['#ee6666', '#5470c6'],
        title: {
            text: '薪资 Salary',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {},
        // 工具箱
        toolbox: {
            show: false,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none',
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {},
            },
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: names, // 同学名单
        },
        yAxis: {
            type: 'value',
        },
        // 滑块
        dataZoom: [
            {
                type: 'inside',
                start: 0,
                end: 10,
            },
            {
                start: 0,
                end: 10, // 总宽度100  10 十分之一 ，  这个设置要上 上面的设置 保持一致
            },
        ],
        series: [
            {
                name: '期望薪资',
                type: 'line',
                smooth: true, // 线条平滑
                symbol: 'circle', // 实心
                data: salarys, // 真实的数据
            },
            {
                name: '实际薪资',
                type: 'line',
                symbol: 'circle', // 实心

                smooth: true, // 线条平滑
                data: truesalarys, // 真实数据
            },
        ],
    };

    // 3 echart实例开始使用配置
    myChart.setOption(option);

}

// 籍贯饼图
function homeTown(list) {
    /* 
    1 定义一个空数组 表示 处理后的数据    
      [
      {value:5,name:"广东省"},
      {value:15,name:"贵州省"},
      ]
  
    2 对 list做遍历
      1 判断一下 当前被遍历的元素 是否存在于 新数组中
      2 如果不存在 新数组push一个新的对象  {value:1,name:"广东"}
      3 如果存在  找到数组中的元素，给它value值 +1 
     */

    const newList = [];
    list.forEach((v) => {
        // v 就是 list中元素    vv.name
        // vv 自己构造的 新数组中的元素
        const index = newList.findIndex((vv) => vv.name === v.province);
        // 如果找到 index不等于-1
        if (index === -1) {
            newList.push({ value: 1, name: v.province });
        } else {
            newList[index].value++;
        }
    });

    const myChart = echarts.init(document.querySelector('.pie'));
    const option = {
        title: {
            text: '籍贯 HomeTown',
        },
        series: [
            {
                name: '籍贯 HomeTown',
                type: 'pie',
                radius: [15, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8,
                },
                data: newList, // 处理后的数组
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
getStudentList();
